
import React, { useMemo, useState , useEffect, useRef} from 'react';
import classNames from 'classnames';
import {useSelector} from 'react-redux'
import ProgressBar from '@components/progress_bar'
import {useTranslation} from 'react-i18next';
import {isDomActive} from '@tools/utils'
import skills from '../json/skills';
import * as styles from '../styles/job_section_2.less';


function JobSection2() {
  const {t} = useTranslation();
  const {language, isChangeMedia} = useSelector(state => state.global);
  const refDom = useRef();
  const [active, setActive] = useState(false);
   useEffect(() => {
      let isActive = isDomActive(refDom)
      setActive(isActive)
  })
  const skills_arr = useMemo(() => skills(), [language]);
  
    return  <div ref={refDom} className={classNames(styles.job_section, 'section')}>
     <div className={classNames(styles.title, active ? styles.title_open : '')}>
        <div className={styles.text}>
          {/* 我可以做什么 */}
          {t('whtat_i_can_do')}
        </div>
        <div className={classNames(styles.title_text)}>
          {/* 技能 */}
        {t('skills')} &&nbsp;
        </div>
        <div className={classNames(styles.title_text)}>
          {/* 熟练程度 */}
          {t('proficencies')}
        </div>
     </div>
     <ul className={styles.skills}>
        {
          skills_arr.map((item, index) => (
            <li key={index}>
                <div className={styles.skill_text}>{item.skill}</div>
                <div className={styles.proficencies_value}>
                  <ProgressBar value={item.proficencies} />
                  </div>
            </li>
          ))
        }
     </ul>
  </div>
}

export default JobSection2;
